import React, {useEffect, useMemo} from 'react';
import {Modal, Form, Input, Select, DatePicker} from 'antd';
import {postsType} from '../../../api/posts';
import {PostsTypeMap} from '../../../api/typeMap';

import ReactQuill, {Quill} from 'react-quill';
import 'react-quill/dist/quill.snow.css';

//  这里的坑就是 Option还要解构出来
const {Option} = Select;

export type props = {
  visible: boolean;
  onCancel: () => void;
  currentDetailData: postsType;
  submitMap: (values: postsType) => void;
};

const CollectionCreateForm = ({
  visible,
  onCancel,
  currentDetailData,
  submitMap
}: props) => {
  const [form] = Form.useForm();
  const layout = {
    labelCol: {span: 5},
    wrapperCol: {span: 18}
  };

  // useEffect(() => { form.setFieldsValue(currentDetailData) },[currentDetailData]);
  useMemo(() => {
    form.setFieldsValue(currentDetailData);
  }, [currentDetailData]);

  return (
    <>
      <Modal
        visible={visible}
        title="文章信息详情"
        onCancel={onCancel}
        width={800}
        destroyOnClose={true}
        onOk={() => {
          form
            .validateFields()
            .then((values: postsType) => {
              form.resetFields();
              form.setFieldsValue(values);
              console.log(values);
              submitMap(values);
            })
            .catch((info: any) => {
              console.log('校验失败:', info);
            });
        }}
      >
        <Form
          form={form}
          {...layout}
          name="serverDetail"
          initialValues={{currentDetailData}}
        >
          <>
            {currentDetailData.id && (
              <Form.Item label="ID" name="id">
                <Input disabled />
              </Form.Item>
            )}
          </>
          <Form.Item
            label="标题"
            name="title"
            rules={[{required: true, message: '输入框不能为空'}]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="作者"
            name="author"
            rules={[{required: true, message: '输入框不能为空'}]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="类别"
            name="type"
            initialValue={PostsTypeMap.get(currentDetailData.type)}
          >
            <Select>
              <Option value={1}>记叙文</Option>
              <Option value={2}>说明文</Option>
              <Option value={3}>议论文</Option>
              <Option value={4}>散文</Option>
            </Select>
          </Form.Item>
          <Form.Item label="链接" name="thumb_url">
            <Input />
          </Form.Item>
          <Form.Item style={{height: 200}} label="内容" name="content">
            <ReactQuill theme="snow" style={{height: 160}} />
          </Form.Item>

          <Form.Item label="创建时间" name="create_time">
            <DatePicker showToday format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>
          <Form.Item label="修改时间" name="update_time">
            <DatePicker showToday format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default CollectionCreateForm;
